<!-- 搜索表单 -->
<template>
  <el-card class="box-card"
           body-style="padding: 22px 22px 0 22px;"
           shadow="never">
    <el-form label-width="100px"
             class="ele-form-search"
             ref="form"
             @keyup.enter.native="search"
             @submit.native.prevent>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="技师名称:"
                        style="height: 21.2px ;">
            <el-input clearable
                      v-model="where.technicianName"
                      placeholder="请输入技师名称" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item style="height: 21.2px ;"
                        label="救援地址:">
            <el-input clearable
                      v-model="where.address"
                      placeholder="请输入救援地址" />
          </el-form-item>
        </el-col>
        <el-col :lg="8"
                :md="12">
          <el-form-item label="联系方式:">
            <el-input clearable
                      v-model="where.mobile"
                      placeholder="请输入地址联系方式" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="处理方式:"
                        prop="paymentMethod">
            <el-select clearable
                       style="height: 31.2px;"
                       class="ele-block"
                       v-model="where.status"
                       @change="(event) => getCategoriesList(event)"
                       placeholder="请选择处理方式">
              <el-option v-for="(item, index) in paymentMethodList"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="救援时间:"
                        prop="dateRange">
            <el-date-picker v-model="where.dateRange"
                            type="datetimerange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="['00:00:00', '23:59:59']"
                            value-format="yyyy-MM-ddTHH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col :lg="6"
                :md="12">
          <div class="ele-form-actions">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ele-btn-icon"
                       @click="search">
              查询
            </el-button>
            <el-button @click="reset('form')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
const DEFAULT_WHERE = {
  technicianName: '',
  address: '',
  //   0 未处理 1已经处理
  status: '',
  mobile: '',
  dateRange: ''
};

export default {
  name: 'RoleSearch',
  data () {
    return {
      // 表单数据
      where: { ...DEFAULT_WHERE },

      paymentMethodList: [
        {
          value: '0',
          label: '未处理'
        },
        {
          value: '1',
          label: '已处理'
        },

      ],
      sumbitForm: {}

    };
  },
  methods: {
    /* 搜索 */
    search () {

      for (const key in this.where) {
        if (key == 'dateRange') {
          let startTime = this.where[key]?.[0];
          let endTime = this.where[key]?.[1];
          this.sumbitForm['createTimeStart'] =
            startTime == undefined ? '' : startTime;
          this.sumbitForm['createTimeEnd'] =
            endTime == undefined ? '' : endTime;
        } else if (key == 'orderAmount') {
          this.sumbitForm['startOrderAmount'] =
            this.where[key].startOrderAmount == undefined
              ? ''
              : this.where[key].startOrderAmount;
          this.sumbitForm['endOrderAmount'] =
            this.where[key].endOrderAmount == undefined
              ? ''
              : this.where[key].endOrderAmount;
        } else {
          this.sumbitForm[key] = this.where[key];
        }
      }
      //   console.log(this.sumbitForm)
      this.$emit('search', this.sumbitForm);
    },
    async getCategoriesList (val) {
      console.log(val)
      this.where.status = val

    },
    /*  重置 */
    reset (formName) {
      this.$refs[formName].resetFields();
      this.where = {};
      this.sumbitForm = {}
      this.$emit('search', this.sumbitForm);
    }
  }
};
</script>
